<template>
	<view class="">
		<view class="runcard">
			<image class="pg_banner" 
			src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/run_card2.jpg" mode=""
			:style="'height:'+windowHeight+'px'"
			></image>
			<!-- #ifdef MP-WEIXIN -->
				<view class="run_info">
					<view class="run_info_top">
						<view class="pic"><image :src="runinfo.Logo" mode=""></image></view>
						<view class="info">
							<view class="info_run_name">
								{{ runinfo.Title }}
								<image :src="vip_p" mode=""></image>
							</view>
							<view class="info_run_id">ID {{ runinfo.IdCode }}</view>
							<view class="info_run_city">{{ runinfo.City }}</view>
						</view>
					</view>
					<image class="run_qrcode" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_ewm1.png" mode=""></image>
				</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
				<image class="save_pic" :src="base" mode="" style="width: 272px;height: 337px;"></image>
			<!-- #endif -->
		</view>
		<!-- 分享 -->
		<view class="share">
			<view class="top">
				<view class="line"></view>
				<text>分享卡片给好友</text>
				<view class="line"></view>
			</view>
			<view class="bot">
				<view class="bot_l">
					<button open-type="share">
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_friend.png" mode=""></image>
						<text>微信好友</text>
					</button>
				</view>
				<view class="bot_l" @tap="down">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_down.png" mode=""></image>
					<text>保存图片</text>
				</view>
			</view>
		</view>
		<!-- 生成画布 -->
		<view style="width:0px;height:0px;overflow:hidden;"><canvas canvas-id="mycanvas" style="width: 272px;height: 337px;"></canvas></view>
		<navigation></navigation>
	</view>
</template>

<script>
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		navigation
	},
	data() {
		return {
			base: '',
			banner_p: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_banner1.png',
			header_p: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_header.png',
			vip_p: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/group_logo.png',
			ewm_p: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/12323.png',
			clubid: '',
			runinfo: {},
			version: '',
			versionflag: false,
			windowHeight: '',
			bannerWchat: '../../static/othertwo/wechat_banner1.png',
			ewmWchat: '../../static/othertwo/12323.png',
			vipWchat: '../../static/othertwo/group_logo.png'
		};
	},
	mounted() {
		this.version = uni.getSystemInfoSync().version;
		this.getrunInfo();
		this.windowHeight = uni.getSystemInfoSync().windowHeight
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			 // console.log (res.target);
		}
		return {
			title: this.runinfo.Title,
			path: '/pageB/run/rungroup?id=' + this.clubid
		};
	},
	onLoad(options) {
		this.clubid = options.clubid;
	},

	methods: {
		// 保存图片
		down() {
			var version = uni.getSystemInfoSync().version;
			if (version) {
				this.resultVersion();
			} else {
				uni.showModal({
					title: '提示',
					content: '长按图片保存',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		getrunInfo() {
			var version = uni.getSystemInfoSync().version;
			this.ajax('club/clubInfo', {
				data: {
					id: this.clubid
				},
				success: res => {
					res.msg.Logo_p = res.msg.Logo.replace('http:', 'https:');
					this.runinfo = res.msg;
					 // console.log (this.runinfo);
					if (!version) {
						this.versionflag = false;
						this.result();
					} else {
						this.versionflag = true;
						// this.resultVersion()
					}
				}
			});
		},
	// 	小程序
		resultVersion() {
			
			uni.showLoading({
				title: '生成图片中'
			});
			// canvas保存图片
			const ctx = uni.createCanvasContext('mycanvas');
			// // 设置背景
			ctx.drawImage(this.bannerWchat, 0, 0, 272, 337);
			// uni.getImageInfo({
			// 	src: this.banner_p,
			// 	success: res=> {
			// 		 // console.log (res.path);
			// 		ctx.drawImage(res.path,0, 0, 272, 337);
			// 		ctx.draw(true); 
			// 	}
			// })
		
		
			ctx.setFillStyle('#333'); //设置内容1的文字样式
			ctx.setFontSize(14);
			ctx.fillText(this.runinfo.Title, 100, 33); //计算距离，将文字定位于图片的某处
			var metrics = ctx.measureText(this.runinfo.Title);
			// //  // console.log (metrics.width)
			ctx.drawImage(this.vipWchat, 105 + metrics.width, 21, 13, 14);
		
			// // 设置id
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			ctx.fillText('ID ' + this.runinfo.IdCode, 100, 65);
			// //s设置城市
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			ctx.fillText(this.runinfo.City, 100, 81);
			// ctx.drawImage(this.ewmWchat, 30, 125, 200, 160);
			//  二维码
			uni.getImageInfo({
				src: this.ewm_p,
				success: res=> {
					ctx.drawImage(res.path,30, 125, 200, 160);
					ctx.draw(true); 
				}
			})
			//  设置头像
			uni.getImageInfo({
				src: this.runinfo.Logo_p,
				success: res=> {
					ctx.drawImage(res.path,30, 20, 63, 63);
					ctx.draw(true); 
				}
			})
			ctx.draw();
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: res => {
						uni.hideLoading();
						const path = res.tempFilePath.replace('http:','https:')
						 // console.log (path);
						// this.base = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: function() {
								//  // console.log ('save success');
								this.toast('保存成功');
							}
						});
					}
				});
			}, 800);
		},
		result() {
			uni.showLoading({
				title: '生成图片中'
			});
			// canvas保存图片
			const ctx = uni.createCanvasContext('mycanvas');
			 // console.log (ctx);
			// 设置背景
			ctx.drawImage(this.banner_p, 0, 0, 272, 337);
			// 设置头像
			ctx.drawImage(this.runinfo.Logo_p, 30, 20, 63, 63);
			ctx.setFillStyle('#333'); //设置内容1的文字样式
			ctx.setFontSize(14);
			var metrics = ctx.measureText(this.runinfo.Title);
			 // console.log (metrics.width)
			ctx.fillText(this.runinfo.Title, 100, 33); //计算距离，将文字定位于图片的某处
			ctx.drawImage('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/123444.png', (105 + metrics.width), 21, 13, 14);
			// 设置id
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			ctx.fillText('ID ' + this.runinfo.IdCode, 100, 65);
			//s设置城市
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			// ctx.setTextAlign('center')  //同上
			ctx.fillText(this.runinfo.City, 100, 81);
			ctx.drawImage(this.ewm_p, 30, 125, 200, 160);
			ctx.draw();
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: res => {
						 // console.log (res);
						uni.hideLoading();
						this.base = res.tempFilePath;
					}
				});
			}, 800);
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageB/run/runcard.less');
</style>
